<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="甘忠祥">
    <title>轮播图片</title>
    <style>
        body{
            margin: 0;
            
        }
        *{
            box-sizing: border-box;
        }
        ul{
            margin: 0; padding: 0;
            list-style: none;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .nav{
            
            width: 100%;
            background-color: gray;
        }
        .nav-list{
            position: relative;
            display: flex;
            left: 360px;
        }
        .nav-list li{
            /* float: left; */
            height: 40px;
            line-height: 40px;
            z-index: 100;
        }
        .nav-list li a{
            color: white;
            text-decoration: none;
            display: block;
            width: 100%;
            height: 100%;
            padding: 0 10px;

        }
        .nav-list li.first{
            background-color: lightslategray;
            width: 60px;
            text-align: center;
            margin-right: 2px;
        }
        .bg{
            height: 40px;
            width: 60px;
            background-color: lightslategray;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.3s linear;
        }
        .box{
            z-index: 50;
        }
        .box li{
            position: absolute;
            display: none;
        }
        .box li.current{
            display: block;
        }
        .container ol{
            list-style: none;
            display: flex;
            /* justify-content: space-around; */
            z-index: 99;
            position: relative;
            top: 460px;
            left: 820px;
            
        }
        .container ol li{
            display: block;
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 50%;
            margin: 0 20px;
               
        }
        .container .first{
            background-color: gray;
        }
        .container p{
            position: absolute;
            font-size: 100px;
            color: white;
            height: 200px;
            width: 50px;
        }
        .container #left{
            top: 150px;
            left:360px;
        }
        .container #right{
            top:150px;
            right: 370px;
        }
    </style>
</head>

<body>
     <nav class="nav">
        <div>
            <ul class="nav-list">
                <li class="first"><a href="#">首页</a></li>
                <li><a href="#">小米商城</a></li>
                <li><a href="#">MIUI</a></li>
                <li><a href="#">米聊</a></li>
                <li><a href="#">游戏</a></li>
                <li><a href="#">多看阅读</a></li>
                <li><a href="#">云服务</a></li>
                <li><a href="#">金融</a></li>
                <li><a href="#">小米商城移动版</a></li>
                <li><a href="#">问题反馈</a></li>
                <div class="bg"></div>
            </ul>
        </div>
    </nav>
<div class="container" id="wrap">
   
	<!-- 轮播指标 -->
	<ol id="list">
		<li class="first"></li>
		<li></li>
        <li></li>
        <li></li>
		<li></li>
		<li></li>
	</ol>   
	<!-- 轮播项目 -->
	 <div class="box">
        <ul>
            <li class="current"><a herf="#"><img src="img/1.jpg" alt=""></a></li>
            <li><a herf="#"><img src="img/2.jpg" alt=""></a></li>
            <li><a herf="#"><img src="img/3.jpg" alt=""></a></li>
            <li><a herf="#"><img src="img/4.jpg" alt=""></a></li>
            <li><a herf="#"><img src="img/5.jpg" alt=""></a></li>
            <li><a herf="#"><img src="img/6.jpg" alt=""></a></li>
        </ul>
    </div> 
	<!-- 轮播导航 -->
	<p id="left">&lsaquo;</p>
	<p id="right">&rsaquo;</p>
</div> 

</body>
<script>
    var lis = document.querySelectorAll('.nav-list li');
    var bg = document.querySelector('.bg');
    for(var i = 0; i < lis.length; i++){
        lis[i].onmouseover = function(){
            var left = this.offsetLeft;

            bg.style.left = left + 'px';
            var width = this.offsetWidth;
            bg.style.width = width + 'px';
        }
        lis[i].onmouseout = function(){
            bg.style.left = 0;
            bg.style.width = '60px'
        }
    }
    // 设置图片轮播
    var lis = document.querySelectorAll('.box li');
    var lb = document.querySelectorAll('#list li');
    var wrap = document.getElementById('wrap');
    var timer = setInterval(changeImage, 2000);
    var index = 0;
    function changeImage(){
        for(var i = 0; i < lis.length; i++){
            lis[i].className = ' ';
            lb[i].className = ' ';
        }
        index++;
        if (index == 6){
            index = 0;
        }
        lis[index].className = 'current';
        lb[index].className = 'first';
    }
    //var timer = null;
    for (var i = 0; i < lis.length; i++){
        lb[i].index = i;
        lb[i].onmouseover = function(){
            clearInterval(timer);
            lb[index].className ='';
            for(var j = 0; j < lis.length; j++){
                lis[j].className = '';
            }
            lb[this.index].style.backgroungColor = 'gray';
            lis[this.index].className = 'current';
        }
        lb[i].onmouseout = function(){
            timer = setInterval(changeImage,2000);
            this.style.backgroungColor = 'white';
        }
    }
    //鼠标划过整个容器时停止自动播放
    // wrap.onmouseover = function () {
    //             clearInterval(timer);
    //         }
    // // 鼠标离开整个容器时开始自动播放
    // wrap.onmouseout = function () {
    //     timer = setInterval(changeImage, 2000);
    //         }
    // 设置轮播导航
    var left = document.getElementById('left');
    var right = document.getElementById('right');
    left.onclick = function(){
       
    }

    
</script>
</html>